<template>
    <div class="main_content">
        <div class="scorll">
            <div class="content">
                <div class="search">
                    <Tabs v-model="tabActiveName"  @on-click="getSwitchBtn" style="width:100%;">
                        <TabPane label="收料单位" name="收料单位"></TabPane>
                        <TabPane label="发料单位" name="发料单位"></TabPane>
                    </Tabs>
                </div>
                <div class="search">
                    <el-button :type="!btnList.includes('fmam/corp/add')?'info':'primary'" @click="updateRow" size="small" plain :disabled="!btnList.includes('fmam/corp/add')">选择单位</el-button>
                </div>
                <div class="table">
                    <el-table :data="list" :height="tableHeight">
                        <el-table-column prop="name" label="单位名称"></el-table-column>
                        <el-table-column prop="corpTypeName" label="单位类型"></el-table-column>
                        <el-table-column prop="bizScope" label="经营范围"></el-table-column>
                        <el-table-column prop="category" label="单位类别">
                            <template slot-scope="scope">
                                <span v-if="scope.row.category == 1">收料单位</span>
                                <span v-if="scope.row.category == 2">发料单位</span>
                            </template>
                        </el-table-column>
                        <el-table-column prop="linkPerson" label="法人"></el-table-column>
                        <el-table-column prop="linkPhone" label="法人电话"></el-table-column>
                        <el-table-column prop="deptName" label="组织机构"></el-table-column>
                        <el-table-column label="操作" width="150px" align="center">
                            <template slot-scope="scope">
                                <el-button @click.native.prevent="getDtails(scope.$index, list)" type="text" size="small">查看详情</el-button>
                                <el-button :style="!btnList.includes('fmam/corp/del')?'color:#C0C4CC':'color:red'" @click.native.prevent="remove(scope.$index, list)" type="text" size="small" :disabled="!btnList.includes('fmam/corp/del')">移除</el-button>
                            </template>
                        </el-table-column>
                    </el-table>
                </div>
                <div class="clearfix" v-show="list.length>0">
                    <div class="float-right">
                        <Page v-if="totalCount" style="margin: 20px 0;text-align: right;" :current.sync="current" :total="totalCount" :page-size="pageSize" show-elevator show-total @on-change="pageChange"></Page>
                    </div>
                </div>
            </div>
        </div>

        <Modal v-model="deleteModal" title="移除" width="360px;" :mask-closable="false">
            <div style="margin:10px">确定要移除这条数据吗？</div>
            <div slot="footer">
                <el-button @click="cancel(1)" type="info" size="small" plain>取消</el-button>
                <el-button @click="detele" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="updateModal" title="选择单位" width="1000pxpx;" :mask-closable="false">
            <div class="list">
                <div class="item">
                    <span>关键字搜索:</span>
                    <Input v-model="keyword" placeholder="请输入单位名称" style="width:200px" maxlength="15" clearable />
                </div>
                <div class="item">
                    <span>单位类型:</span>
                    <Select v-model="corpType" style="width:150px" placeholder="请选择单位类型">
                        <Option v-for="item in corpTypeList" :value="item.id" :key="item.id">{{item.name}}</Option>
                    </Select>
                </div>
                <div class="item">
                    <el-button type="primary" @click="searchAllCorp" size="small" plain>搜索</el-button>
                    <el-button type="info" @click="clear(1)" style="margin-left:20px" size="small" plain>重置</el-button>
                </div>
            </div>
            <div class="table" style="width:96%;margin:20px auto;">
                <el-table :data="corplist" style="width: 100%" border @select="listSelectOne" @select-all="listSelectALL">
                    <el-table-column type="selection" width="55"></el-table-column>
                    <el-table-column fixed prop="corpName" label="单位名称"></el-table-column>
                    <el-table-column fixed prop="corpTypeName" label="单位类型"></el-table-column>
                </el-table>
            </div>
            <div class="clearfix" v-show="list.length>0">
                <div class="float-right">
                    <Page v-if="corpTotalCount" style="margin: 20px 0;text-align: right;" :current.sync="corpCurrent" :total="corpTotalCount" :page-size="corpPageSize" show-elevator show-total @on-change="corpPageChange"></Page>
                </div>
            </div>
            <div slot="footer">
                <el-button @click="cancel(2)" type="info" size="small" plain>取消</el-button>
                <el-button @click="submit" type="primary" size="small" plain v-preventReClick="1500">确定</el-button>
            </div>
        </Modal>

        <Modal v-model="detailModal" width="800px" :mask-closable="false" title="供应商详情" :footer-hide="true">
            <div class="msg">
                <div class="tags">
                    <h2>合作单位</h2>
                    <div class="list">
                        <div class="item">
                            <span>供应商名称:</span>
                            <span>{{detailsObj.name}}</span>
                        </div>
                        <div class="item">
                            <span>合作单位类型:</span>
                            <span>{{detailsObj.corpTypeName}}</span>
                        </div>
                    </div>
                    <div class="list">
                        <div class="item">
                            <span>供应商编码:</span>
                            <span>{{detailsObj.code}}</span>
                        </div>
                        <div class="item">
                            <span>供应商类别:</span>
                            <span v-if="detailsObj.category==1">收料单位</span>
                            <span v-if="detailsObj.category==2">发料单位</span>
                        </div>
                    </div>
                </div>
                <div class="tags">
                    <h2>法人</h2>
                    <div class="list">
                        <div class="item">
                            <span>联系人:</span>
                            <span>{{detailsObj.linkPerson}}</span>
                        </div>

                        <div class="item">
                            <span>联系电话:</span>
                            <span>{{detailsObj.linkPhone}}</span>
                        </div>
                    </div>
                </div>
                <div class="tags">
                    <h2>地址</h2>
                    <div class="list">
                        <div class="item">
                            <span>省份城市:</span>
                            <span>{{detailsObj.province}}{{detailsObj.city}}{{detailsObj.area}}</span>
                        </div>
                        <div class="item">
                            <span>详细地址:</span>
                            <span>{{detailsObj.address}}</span>
                        </div>
                    </div>
                </div>
                <div class="tags">
                    <h2>组织机构</h2>
                    <div class="list">
                        <div class="item">
                            <span>组织机构:</span>
                            <span>{{porjectName}}</span>
                        </div>
                    </div>
                </div>
            </div>
        </Modal>
    </div>
</template>

<script>
import {
    getSupplierList,
    getSupplierDetail,
    getSupplierDel,
    getTypeList,
    getSupplierAdd,
    getSupplierCorpList
} from "@/api/api.js";
import { list } from "@/sever/list.js";
export default {
    data() {
        return {
            tabActiveName:'收料单位',
            current: 1,
            pageSize: 10,
            pageNum: 1,
            totalCount: "",
            corpCurrent: 1,
            corpPageSize: 10,
            corpPageNum: 1,
            corpTotalCount: "",
            deptId: "",
            list: [],
            deleteModal: false,
            updateModal: false,
            removeID: "",
            flag: true,
            category: 1,
            corpTypeList: [],
            corpType: "",
            keyword: "",
            corplist: [],
            arr: [],
            detailModal: false,
            detailsObj: {},
            porjectName: "",
            CArr: list(),
            CArr1: [],
            arr: [],
            btnList:[],
            tableHeight: window.innerHeight - 345
        };
    },
    computed: {
        porjectObject() {
            return this.$store.state.porjectObject;
        }
    },
    watch: {
        porjectObject(val, oldVal) {
            if (val.deptId != oldVal.deptId) {
                this.deptId = val.deptId;
                this.porjectName = val.name;
                this.getAllList();
                this.getAllCorpList();
                this.category = 1;
            }
        }
    },
    methods: {
        getSwitchBtn(name){
            if(name=='发料单位'){
                this.getCategoryType(1)
            }else if(name == '收料单位'){
                this.getCategoryType(0)
            }
        },
        //合作单位类型
        getcorpTypeList() {
            let params = {
                code: "corp_type"
            };
            getTypeList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.corpTypeList = res.data.childList;
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        //获取合作单位列表
        getAllCorpList() {
            let params = {
                pageSize: this.corpPageSize,
                pageNum: this.corpPageNum,
                keyword: this.keyword,
                deptId: this.deptId,
                corpTypeId: this.corpType,
                category: this.category
            };
            getSupplierCorpList(params)
                .then(res => {
                    if (res.code == 200) {
                        this.corplist = res.data.list;
                        this.corpTotalCount = res.data.total;
                    } else {
                        /* 错误请求阻止 */
                        // this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        corpPageChange(index) {
            this.corpPageNum = index;
            this.getAllCorpList();
        },
        searchAllCorp() {
            this.corpPageNum = 1;
            this.corpCurrent = 1;
            this.getAllCorpList();
        },
        //获取仓库列表
        getAllList() {
            let params = {
                pageSize: this.pageSize,
                // pageNum: this.pageNum,
                deptId: this.deptId,
                category: this.category
            };
            getSupplierList(params, this.pageNum)
                .then(res => {
                    if (res.code == 200) {
                        this.list = res.data.list;
                        this.totalCount = res.data.total;
                    } else {
                        /* 错误请求阻止 */
                        // this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        pageChange(index) {
            this.pageNum = index;
            this.getAllList();
        },
        getdept(index) {
            this.deptId = index.id;
            this.getAllList();
        },
        clear(type) {
            if (type == 1) {
                this.keyword = "";
                this.corpType = "";
                this.corpPageNum = 1;
                this.corpCurrent = 1;
                this.getAllCorpList();
            }
        },
        getCategoryType(type) {
            if (type == 0) {
                this.flag = true;
                this.category = 1;
            } else if (type == 1) {
                this.flag = false;
                this.category = 2;
            }
            this.getAllList();
        },
        getDtails(index, rows) {
            this.detailModal = true;
            getSupplierDetail(rows[index].id)
                .then(res => {
                    if (res.code == 200) {
                        this.detailsObj = res.data;
                        for (let i in this.CArr1) {
                            if (
                                this.detailsObj.province == this.CArr1[i].value
                            ) {
                                this.detailsObj.province = this.CArr1[i].label;
                                for (let j in this.CArr1[i].children) {
                                    if (this.detailsObj.city == this.CArr1[i].children[j].value) {
                                        this.detailsObj.city = this.CArr1[i].children[j].label;
                                        for (let k in this.CArr1[i].children[j].children) {
                                            if (this.detailsObj.area ==this.CArr1[i].children[j].children[k].value) {
                                                this.detailsObj.area = this.CArr1[i].children[j].children[k].label;
                                            }
                                        }
                                    }
                                }
                            }
                        }
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        updateRow() {
            this.arr = [];
            this.corpType = "";
            this.getAllCorpList();
            this.updateModal = true;
        },
        remove(index, rows) {
            this.removeID = rows[index].id;
            this.deleteModal = true;
        },
        detele() {
            getSupplierDel(this.removeID)
                .then(res => {
                    if (res.code == 200) {
                        this.deleteModal = false;
                        this.$Message.success("操作成功");
                        this.getAllList();
                    } else {
                        this.$Message.warning(res.msg);
                    }
                })
                .catch(error => {
                    console.log(error);
                });
        },
        listSelectOne(selection, row) {
            this.arr = [];
            selection.forEach(i => {
                this.arr.push(i.corpId);
            });
        },
        listSelectALL(selection) {
            this.arr = [];
            selection.forEach(i => {
                this.arr.push(i.corpId);
            });
        },
        submit() {
            if (this.arr.length == 0) {
                this.$Modal.warning({
                    title: "您有必填字段",
                    content: "请选择合作单位"
                });
                return;
            }
            let params = {
                corpIds: this.arr,
                category: Number(this.category)
            };
            getSupplierAdd(params).then(res => {
                if (res.code == 200) {
                    this.$Message.success("操作成功");
                    this.pageNum = 1;
                    this.current = 1;
                    this.getAllList();
                    this.updateModal = false;
                } else {
                    this.$Message.warning(res.msg);
                }
            });
        },
        cancel(type) {
            if (type == 1) {
                this.deleteModal = false;
            } else if (type == 2) {
                this.updateModal = false;
            }
        },
        //获取省市级三级联动
        getCascader() {
            this.arr = this.CArr;
            for (let i in this.arr) {
                this.arr[i].value = this.arr[i].id;
                this.arr[i].label = this.arr[i].name;
                this.arr[i].children = this.arr[i].childList;
                delete this.arr[i].id;
                delete this.arr[i].name;
                delete this.arr[i].childList;
                for (let j in this.arr[i].children) {
                    this.arr[i].children[j].value = this.arr[i].children[j].id;
                    this.arr[i].children[j].label = this.arr[i].children[j].name;
                    this.arr[i].children[j].children = this.arr[i].children[j].childList;
                    delete this.arr[i].children[j].id;
                    delete this.arr[i].children[j].name;
                    delete this.arr[i].children[j].childList;
                    for (let k in this.arr[i].children[j].children) {
                        this.arr[i].children[j].children[k].value = this.arr[i].children[j].children[k].id;
                        this.arr[i].children[j].children[k].label = this.arr[i].children[j].children[k].name;
                        delete this.arr[i].children[j].children[k].id;
                        delete this.arr[i].children[j].children[k].name;
                    }
                }
            }

            this.CArr1 = this.arr;
        }
    },
    mounted() {
        this.deptId = this.$store.state.porjectObject.deptId;
        this.porjectName = this.$store.state.porjectObject.name;
        this.btnList = JSON.parse(localStorage.getItem("arr"));
        this.getAllList();
        this.getAllCorpList();
        this.getCascader();
        this.getcorpTypeList();
    }
};
</script>


<style scoped lang="less">
@import "./../../assets/style/themeBase.less";
@import "./../../assets/style/common.less";
.active {
    background: var(--themeColor) !important;
    border: var(--themeColor) !important;
    color: #fff !important;
}
.list {
    display: flex;
    justify-content: flex-start;
    width: 100%;
    margin: 0 auto;
    .item {
        margin-right: 20px;
    }
}
.msg {
    width: 100%;
    .tags {
        padding: 5px 10px;
        background: #fafafa;
        border-radius: 10px;
        margin-top: 20px;
    }
    p {
        font-size: 24px;
        margin-top: 20px;
        text-align: center;
    }
    .list {
        width: 100%;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 15px;
        .item {
            display: flex;
            width: 50%;
            justify-content: flex-start;
            align-items: center;
            position: relative;
            padding-left: 16px;
            box-sizing: border-box;
            span {
                display: block;
                height: auto;
            }
            // span:first-child {
            //     width: 120px;
            // }
            .tip {
                position: absolute;
                top: 8px;
                left: 0;
                color: red;
                font-size: 16px;
            }
        }
    }
}
h2 {
    font-size: 14px;
    font-weight: 400;
}
</style>
